import React from "react";
import { View, StyleSheet, Dimensions, Text, Image, TouchableOpacity } from "react-native";
import LinearGradinet from 'react-native-linear-gradient';
import { useSelector } from "react-redux";
import IconNavBar from '@/components/IconNavBar'
import { sectokenCommonCenterProps } from '@/config/navigatorProps'
import { CoinArray, PayWithArray } from '@/config/config'

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const SectokenSendReview = (props) => {

    const selectedSafeWallet = useSelector((state) => state.sectokenMainReducer.selectedSafeWallet || {});
    const selectedSafeAsset = useSelector((state) => state.sectokenMainReducer.selectedSafeAsset || {});
    const sendData = useSelector((state) => state.sectokenMainReducer.sendData || {});

    const handlePressLeft = () => {
        props.navigation.goBack()
    }

    const handlePressConfirm = () => {
        props.navigation.navigate('safe-send-owner')
    }

    return (
        <View style={styles.container}>
            <IconNavBar {...props} {...sectokenCommonCenterProps} {...{ title: 'Review' }} handlePressLeft={handlePressLeft} />
            <View style={styles.bodyContent}>
                <View style={{ alignItems: 'center' }}>
                    <View style={{ ...styles.content1, justifyContent: 'space-between' }}>
                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                            <View style={styles.divider}></View>
                            <Image source={{ uri: selectedSafeAsset.tokenInfo.logoUri }} style={styles.img1} />
                            <Text style={styles.title1}>{selectedSafeAsset.tokenInfo.symbol?.toUpperCase()}</Text>
                        </View>
                        <Text style={{ ...styles.title1, marginRight: 22 * ratio }}>{sendData.amount} {selectedSafeAsset.tokenInfo.symbol?.toUpperCase()}</Text>
                    </View>
                </View>
                <Text style={{ ...styles.title2, marginLeft: 15 * ratio, marginTop: 14 * ratio }}>From</Text>
                <View style={{ alignItems: 'center', marginTop: 12 * ratio }}>
                    <View style={styles.content2}>
                        <Image source={PayWithArray[selectedSafeWallet.profileImg]} style={styles.img2} />
                        <View style={{ marginLeft: 14 * ratio }}>
                            <Text style={styles.title1}>{selectedSafeWallet.label}</Text>
                            <Text style={{ ...styles.title2, width: 178 * ratio }}
                                numberOfLines={1}
                                ellipsizeMode='middle'>
                                {selectedSafeWallet.address}
                            </Text>
                        </View>
                    </View>
                </View>
                <Text style={{ ...styles.title2, marginLeft: 15 * ratio, marginTop: 18 * ratio }}>To</Text>
                <View style={{ alignItems: 'center', marginTop: 12 * ratio }}>
                    <View style={styles.content2}>
                        <Image source={PayWithArray[sendData.profileImg]} style={styles.img2} />
                        <View style={{ marginLeft: 14 * ratio }}>
                            <Text style={styles.title1}>{sendData.label}</Text>
                            <Text style={{ ...styles.title2, width: 178 * ratio }}
                                numberOfLines={1}
                                ellipsizeMode='middle'>
                                {sendData.address}
                            </Text>
                        </View>
                    </View>
                </View>
                <View style={{ flex: 1, justifyContent: 'flex-end', alignItems: 'center', marginBottom: 24 * ratio }}>
                    <TouchableOpacity onPress={handlePressConfirm}>
                        <LinearGradinet colors={['#0EBBF8', '#0069F6']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.button}>
                            <Text style={{ ...styles.title1, color: '#FFFFFF', textAlign: 'center' }}>Confirm</Text>
                        </LinearGradinet>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFFFFF'
    },
    bodyContent: {
        flex: 1,
        marginTop: 10 * ratio
    },
    content1: {
        width: 330 * ratio,
        height: 56 * ratio,
        backgroundColor: '#F7F7F7',
        flexDirection: 'row',
        alignItems: 'center'
    },
    content2: {
        width: 330 * ratio,
        height: 40 * ratio,
        flexDirection: 'row',
        alignItems: 'center'
    },
    divider: {
        width: 3 * ratio,
        height: 21 * ratio,
        backgroundColor: '#0A6EEB',
        marginLeft: 8 * ratio
    },
    img1: {
        width: 25 * ratio,
        height: 25 * ratio,
        marginLeft: 8 * ratio
    },
    img2: {
        width: 40 * ratio,
        height: 40 * ratio
    },
    title1: {
        fontSize: 16,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#2C2C2C',
        lineHeight: 24
    },
    title2: {
        fontSize: 12,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#606060',
        lineHeight: 18
    },
    button: {
        width: 310 * ratio,
        height: 50,
        borderRadius: 28,
        justifyContent: 'center'
    }
})
export default SectokenSendReview